<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <link rel="stylesheet" href="sdk/sdk.css"/>
    <link rel="stylesheet" href="sdk/helper.css"/>
    <link rel="stylesheet" href="sdk/iconfont.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="sdk/sdk.js"></script>
<script type="text/javascript">
    (function () {
            let amis = amisRequire('amis/embed');
            // 全局后端url
            const serverUrl = 'http://localhost:9999';

            // 首次登录清理token
            // localStorage.removeItem("X-Access-Token");
            // 通过替换下面这个配置来生成不同页面
            let amisJSON = {
                type: 'page',
                title: "",
                style: {
                    "backgroundImage": "linear-gradient(180deg, #86a4e9, transparent)"
                },
                cssVars: {
                    "--Form-input-onFocused-borderColor": "#e8e9eb",
                    "--Form-input-onHover-borderColor": "#e8e9eb",
                },
                body: {
                    "type": "grid-2d",
                    "cols": 12,
                    "grids": [{
                        x: 5,
                        y: 5,
                        h: 1,
                        w: 4,
                        width: 200,
                        type: 'form',
                        mode: 'horizontal',
                        api: {
                            "method": "post",
                            "url": "http://localhost:9999/tianqi/token/login",
                            adaptor: function (payload, response) {
                                if (payload.status === 0) {
                                    let newDate = new Date();//获取当前的时间对象
                                    let nowTimeStamp = newDate.getTime();//获取当前时间对象的时间戳
                                    nowTimeStamp += (7 * 24 * 60 * 60 * 1000);
                                    newDate.setTime(nowTimeStamp);
                                    let expires = "expires=" + newDate.toGMTString();
                                    localStorage.setItem('X-Access-Token', payload.data[0].token);
                                    document.cookie = `username=${payload.data[0].username};${expires};`;
                                }
                                return payload
                            },
                            requestAdaptor(api) {
                                api.body.password = CryptoJS.MD5(api.body.password).toString()
                            }
                        },
                        panelClassName: "p-r p-l p-b-md",
                        redirect: "/",
                        body: [
                            {
                                "type": "tpl",
                                "tpl": "<div class='loginTitle'><p>管理后台</p></div>"
                            },
                            {
                                type: "input-text",
                                label: false,
                                name: "username",
                                size: "full",
                                placeholder: "登陆名",
                                addOn: {
                                    "label": "",
                                    "type": "text",
                                    "position": "left",
                                    "icon": "fa fa-user"
                                },
                            },
                            {
                                type: "input-password",
                                label: false,
                                name: "password",
                                size: "full",
                                placeholder: "密码",
                                addOn: {
                                    "label": "",
                                    "type": "text",
                                    "position": "left",
                                    "icon": "fa fa-lock"
                                },
                            },
                            {
                                type: "checkbox",
                                label: false,
                                name: "record",
                                option: "记住密码"
                            },
                            {
                                type: "control",
                                label: false,
                                body: {
                                    "type": "button",
                                    "level": "primary",
                                    "actionType": "submit",
                                    "block": true,
                                    "label": "登陆"
                                }
                            }

                        ]
                    }]
                }
            }
            //参考https://juejin.cn/post/7122021869158400013
            let amisScoped = amis.embed('#root', amisJSON, {serverUrl: serverUrl}, {theme: 'cxd'});
        }
    )
    ();
</script>
</body>
</html>